﻿<div class="thumbnail" style="margin-bottom: 5px;">
    <div class="row-fluid" align="center">
        <button class="btn btn-small" data-bind="click: function(){ $root.folder.send(); }">Send</button>
        <button class="btn btn-small" data-bind="click: function(){ $root.folder.discard(); }">Discard</button>
    </div>
</div>
<div style="height: 520px" class="thumbnail">
    <div style="margin-top: 10px; margin-bottom: 10px; margin-left: 10px; margin-right: 10px;">
        <div class="row-fluid" style="margin-bottom: 5px"> 
            <div class="span2">
                <strong>From</strong>
                <i class="icon-info-sign" data-bind= "popover: { html: true, title:'Please pay attention! ', content: 'Your first made profile is preselected as sender. If you want, you can change it using autocompletion.', placement: 'right', trigger: 'hover', delay: { show: 500, hide: 2000 }}"></i>
            </div>
            <div class="input-append span10" style="height: 25px;">
                <div class="thumbnail span9" style="height: 100%; width: 550px; margin-left: 0px;">
                    <span data-bind="with: $root.folder.senderTag" style="margin-right: 5px;">
                        <a class="btn btn-mini" href="#" data-bind="click: function(){ $root.folder.removeSenderTag($data); }"><span data-bind="text: Title"></span> <i class="icon-remove"></i></a>
                    </span>
                    <input id="senderAutocomplete" style="border: none; box-shadow: none; width: 100px; height: 15px; margin-bottom: 5px;" type="text"/>
                </div>
                <span class="add-on" style="height: 20px; width: 20px">
                    <a href="#" data-bind="click: function(){ $root.folder.showAllSenders(); }">
                        <i class="icon-chevron-down"></i>
                    </a>
                </span>
            </div>
        </div>
        <div class="row-fluid" style="margin-bottom: 5px"> 
            <div class="span2">
                <strong>To</strong>
            </div>
            <div class="input-append span10" style="height: 25px;">
                <div class="thumbnail span9" style="height: 100%; width: 550px; margin-left: 0px;">
                    <span data-bind="foreach: $root.folder.recipientsTags" style="margin-right: 5px;">
                        <a class="btn btn-mini" href="#" data-bind="click: function(){ $root.folder.removeRecipientTag($data); }"><span data-bind="text: Title"></span> <i class="icon-remove"></i></a>
                    </span>
                    <input id="recipientsAutocomplete" style="border: none; box-shadow: none; width: 100px; height: 15px; margin-bottom: 5px;" type="text"/>
                </div>
                <span class="add-on" style="height: 20px; width: 20px">
                    <a href="#" data-bind="click: function(){ $root.folder.showAllRecipients(); }">
                        <i class="icon-chevron-down"></i>
                    </a>
                </span>
            </div>
        </div>
        <div data-bind="with: folder">
            <div data-bind="with: workingMessage">
                <div class="row-fluid">
                    <strong class="span2">Subject</strong>
                    <div class="span10"><input data-bind="value: Subject" class="span12"/></div>
                </div>
                <div class="row-fluid" style="margin-top: 10px">
                    <div class="span12">
                        <textarea cols="20" rows="8" data-bind="tinymce: Body, tinymceOptions: { theme: 'advanced', height: '380', width:'900' }"></textarea>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>